import React from "react";

import { storiesOf } from "@storybook/react";
import { select, number } from "@storybook/addon-knobs";
// import { withSmartKnobs } from 'storybook-addon-smart-knobs'


import SvgIcon from "./";

const boolVariants = {
  true: true,
  false: false,
};

const typeVariants = {
  iconBuy: "iconBuy",
  iconDownload: "iconDownload",
  iconAddWhite: "iconAddWhite",
  iconDelete: "iconDelete",
};
storiesOf("SvgIcon", module)
  .add("SvgIcon", () => (
    <div className='flex items-baseline'>
      <SvgIcon
        type={select("Type", typeVariants, "iconBuy")}
        rotate={number('Rotate', undefined)}
        spin={select("Spin", boolVariants, false)}
        verticalGap={number('VerticalGap', undefined)}
        horizontalGap={number('HorizontalGap', undefined)}
        onClick={() => console.log('click')}
      />
      {/* <SvgIcon
        type={select("Type", typeVariants, "iconDelete")}
        rotate={number('Rotate', undefined)}
        spin={select("Spin", boolVariants, true)}
        verticalGap={number('VerticalGap', undefined)}
        horizontalGap={number('HorizontalGap', undefined)}
      /> */}
    </div>
  ));
